import React, { memo } from 'react';
import { connect } from 'react-redux';
import comASlice from './store/comASlice';

const { actions: { increment, decrement}} = comASlice;

const ComA = (props) => {
  const { num } = props;
  const { handleIncrement, handleDecrement } = props;

  return (
    <div>
      <p>ComB</p>
      <p>num: <b>{num}</b></p>

      <button onClick={() => handleIncrement(10)}>increase +10</button>
      <button onClick={() => handleDecrement(10)}>decrease -10</button>
    </div>
  )
}

const mapStateToProps = state => ({
  num: state.comAReducer
});

const mapDispatchToProps = dispatch => ({
  handleIncrement(num) {
    dispatch(increment(num));
  },
  handleDecrement(num) {
    dispatch(decrement(num));
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(memo(ComA));